<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>全网热播视频</title>
    <link rel="stylesheet" href="css/play.css">
    <style>
        /* 上箭头 */
        .shang {
            /* background-color: red; */
            /* 设置背景图片 */
            background-image: url(./images/orange.jpg);
            background-repeat: no-repeat;
            background-position: 95% -30%;
        }

        /* 下箭头 */
        .xia {
            /* 设置背景图片 */
            background-image: url(./images/green.jpg);
            background-repeat: no-repeat;
            background-position: 95% -30%;
        }
    </style>
</head>
<body>
<section id="play">
    <h1>全网热播视频</h1>
    <ul>
        <li><img src="images/flv01.jpg"><p>昊花梦</p><span>1</span></li>
        <li><img src="images/flv02.jpg"><p>好先生</p><span>2</span></li>
        <li>
            <ol>
                <li>
                    <span>3</span>
                    三八线
                    <p>加入看单</p>
                </li>
                <li><span>4</span>吉详天宝<p>加入看单</p></li>
                <li><span>5</span>亲爱的翻译官<p>加入看单</p></li>
                <li><span>6</span>仙剑云之凡<p>加入看单</p></li>
                <li><span>7</span>权力的游戏第五季<p>加入看单</p></li>
                <li><span>8</span>琅琊榜<p>加入看单</p></li>
                <li><span>9</span>那年青春我们正好<p>加入看单</p></li>
                <li><span>10</span>乡村受情8（上）<p>加入看单</p></li>
            </ol>
        </li>
    </ul>
</section>
<script src="./js/jquery-1.12.4.js"></script>
<script>
    $(function(){
        // 
        $("ul>li:last").css({"margin-left":"10px","background":"#f0f0f0"});

        // 给数字设置背景色
        $("li span:lt(3)").css("background","#f0a30f");
        $("li span:gt(2)").css("background","#a4a3a3");


        //3、5、6、7后的箭头向上，4、8、9、10后的箭头向下
        $("ol>li:eq(0)").addClass("shang");
        $("ol>li:eq(2)").addClass("shang");
        $("ol>li:eq(3)").addClass("shang");
        $("ol>li:eq(4)").addClass("shang");

        $("ol>li:eq(1)").addClass("xia");
        $("ol>li:eq(5)").addClass("xia");
        $("ol>li:eq(6)").addClass("xia");
        $("ol>li:eq(7)").addClass("xia");



        //鼠标移至右侧列表上时，显示对应的隐藏内容“”加入清单，鼠标离开后隐藏内容

        // hover 支持双参数
        $("ol>li").hover(
            function(){
                // $(this) 代表li元素
                // 显示
                $(this).find("p").show();
            },
            function(){
                // $(this) 代表li元素
                // 隐藏
                $(this).find("p").hide();
            }
        )

        


    })
</script>
</body>
</html>